<template>
	<el-upload class="avatar-uploader" action="#" :http-request="handleSuccess" :show-file-list="false">
		<img v-if="props.images" :src="props.images" class="avatar" />
		<el-icon v-else class="avatar-uploader-icon">
			<Plus />
		</el-icon>
	</el-upload>
</template>
<script setup>
import { upLoadImage } from '@/api/user.js'
import { Plus } from '@element-plus/icons-vue'
const emits = defineEmits(['update:images'])
const props = defineProps({
	images: {
		type: String,
		default: ''
	},
})
// 自定义图片上传
const handleSuccess = async (file) => {
	const formData = new FormData()
	formData.append('file', file.file)
	const res = await upLoadImage(formData)
	emits('update:images', res)
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
<style scoped>
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
